<template>
  <a-space>
    <div>
      基础数值动画：
      <vc-ani-number :value="100"></vc-ani-number>
    </div>
    <div>
      定义初始值：
      <vc-ani-number :value="100" :initial="50"></vc-ani-number>
    </div>
    <div>
      循环动画：
      <vc-ani-number :value="100" :loopAnimate="true" ></vc-ani-number>
    </div>
    <div>
      定义数值精度：
      <vc-ani-number :value="100" precision="2"></vc-ani-number>
    </div>
    <div>
      自定义步长：
      <vc-ani-number :value="100" :step="5"></vc-ani-number>
    </div>
    <div>
      动画间隔时间：
      <vc-ani-number :value="100" :loopAnimate="true" :delay="5000"></vc-ani-number>
    </div>
    <div>
      数值格式化：
      <vc-ani-number :value="100" :format="(value) => value + '%'"></vc-ani-number>
    </div>
     <div>
      手动开启动画：
      <vc-ani-number :value="100" :animate="isAnimate"></vc-ani-number>
      <a-button type="primary" class="ml-12" @click="isAnimate = true">开始</a-button>
    </div>
  </a-space>
</template>

<script setup>
const isAnimate = ref(false)
</script>

<style lang="less" scoped></style>
